<template>
  <div class="create-button">
    <el-button
      :style="{width: width}"
      :class="{'mobile-btn': showMobilePage}"
      type="primary"
      class="btn-operate btn-create"
      size="small"
      @click="toCreate">
      <div class="center">
        <span class="name">{{ addName }}</span>
        <i v-if="icon !== ''" :class="icon" style="font-size: 16px;" />
        <!-- <svg-icon v-if="icon === ''" icon-class="createOrder" style="width: 16px;height:16px"/> -->
        <i v-if="icon === ''" class="el-icon-plus" style="font-size: 16px;" />
      </div>
    </el-button>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'CreateButton',
  props: {
    width: {
      type: String,
      default: () => {
        return '';
      }
    },
    addName: {
      type: String,
      default: () => {
        return '';
      }
    },
    icon: {
      type: String,
      default: () => {
        return '';
      }
    },
    createLinkName: {
      type: String,
      default: () => {
        return '';
      }
    },
    isOwnLogic: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    toCreate() {
      if (!this.isOwnLogic) {
        this.$router.push({
          name: this.createLinkName
        });
      } else {
        this.$emit('click');
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.create-button {
  .btn-create {
    padding: 7px 15px;
    color: #fff !important;
    color:rgba(255,255,255,1);
  }
  .center {
    display: flex;
    align-items: center;
    .name {
      margin-right: 5px;
    }
  }
}
.mobile-create-btn {
  height: 36px !important;
  flex: 1;
  border-radius: 4px;
  .btn-create {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    font-size: 16px;
  }
}
</style>
